<template>
	<coreshop-page title="服务商品" mode="left" needLoadingPage :loadingPage="loading">
		<view class="layout-goods-box">
			<view v-if="state.list.length > 0">
				<view class="item-box" v-for="item, index in state.list" :key="item.id">
					<view class="msg-box">
						<image class="img" :src="item.thumbnail"></image>
						<view class="name-box">
							<view class="name">{{ item.title }}</view>
							<view class="desc">{{ item.description }}</view>
							<view class="price-box">
								<view class="price">￥{{ item.money }}</view>
								<view class="num">最大购买限制：{{ item.maxBuyNumber }}</view>
							</view>
						</view>
					</view>
					<view class="level-box">
						<view class="title">兑换级别：</view>
						<view class="tag-box">
							<view class="tag" v-for="cell in item.allowedMemberships" :key="cell">
								<uv-tags :text="cell" plain size="mini"></uv-tags>
							</view>
						</view>
					</view>
					<view class="level-box">
						<view class="title">兑换门店：</view>
						<view class="tag-box">
							<view class="tag" v-for="cell in item.consumableStores" :key="cell">
								<uv-tags :text="cell" plain size="mini" type="success"></uv-tags>
							</view>
						</view>
					</view>
					<view class="btn-box">
						<view class="time-box"
							v-if="(item.openStatus == ServiceGoodsOpenEnum.start || item.openStatus == ServiceGoodsOpenEnum.noStart) && item.timestamp > 0">
							<view class="title" v-if="item.openStatus == ServiceGoodsOpenEnum.start">仅剩时间：</view>
							<view class="title" v-if="item.openStatus == ServiceGoodsOpenEnum.noStart">距离开始：</view>
							<uv-count-down :time="item.timestamp * 1000" format="DD天HH时mm分ss秒" autoStart millisecond
								@change="onChange($event, index)">
								<view class="time">
									<text class="time_item">
										{{ item?.timeData?.days }}
									</text>天
									<text class="time_item">
										{{ item?.timeData?.hours > 10 ? item?.timeData?.hours : '0' +
                                        item?.timeData?.hours}}
									</text>时
									<text class="time_item">
										{{ item?.timeData?.minutes }}
									</text>分
									<text class="time_item">
										{{ item?.timeData?.seconds }}
									</text>秒
								</view>
							</uv-count-down>
						</view>
						<view class="end-title" v-if="item.openStatus == ServiceGoodsOpenEnum.end">活动已结束</view>
						<view class="btn">
							<uv-button
								@click="handleRouteNavigateTo(`/pages/subpackage/serviceGoods/detail/detail?id=${item.id}`)"
								v-if="item.openStatus == ServiceGoodsOpenEnum.start" type="primary" size="small"
								text="立刻抢购"></uv-button>
							<uv-button v-if="item.openStatus == ServiceGoodsOpenEnum.end" type="primary" size="small"
								disabled text="活动已结束"></uv-button>
							<uv-button v-if="item.openStatus == ServiceGoodsOpenEnum.noStart" type="warning"
								size="small" disabled text="活动未开始"></uv-button>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>

			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无服务商品"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { queryServicelist } from '@/core/api';
	import type { Response, ServiceGoodsType } from '@/core/models';
	import { EmptyEnum, ServiceGoodsOpenEnum } from '@/core/enum';
	import { handleRouteNavigateTo } from '@/core/utils';
	import { useLoadingFn } from '@/core/hooks';

	const state = reactive<{
		list : Array<ServiceGoodsType>;
		totalPages : number;
		page : number,
		limit : number;

	}>({
		list: [],
		totalPages: 1,
		page: 1,
		limit: 10,

	})

	const loading = ref(true);
	const handleQuerytServicelist = useLoadingFn(getServicelist, loading);


	onLoad(() => {
		handleQuerytServicelist()
	})

	onPullDownRefresh(async () => {
		state.list = [];
		await handleQuerytServicelist();
		uni.stopPullDownRefresh();
	});

	/** 获取服务商品列表 */
	async function getServicelist() {
		const servicelist : Response<{ count : number, list : Array<ServiceGoodsType> }> = await queryServicelist({
			page: state.page,
			limit: state.limit
		})
		state.totalPages = Math.ceil(servicelist.data?.count / state.limit);
		state.list = state.list.concat(servicelist?.data?.list.map((item : ServiceGoodsType) => {
			item['timeData'] = {
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
			}
			return item;
		}));
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getServicelist();
		}
	})

	/** 时间倒计时 */
	const onChange = (e : any, index : number) => {
		state.list[index]['timeData'] = e;
	}
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>